<template>
  <div id="healthChild">
    <div class="box">   
        <div class="container">
            <el-row :gutter="10">
                <div class="top1">
                    <el-col ><div class="grid-content bg-purple">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane v-for="(value,index) in products" :key="index" :label="value.name" :name="value.list" v-on:click.native="torouter(index)"  ></el-tab-pane>
                    </el-tabs>
                    </div></el-col>
                </div>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="24" ><div class="grid-content bg-purple">
                    <!-- md以上隐藏 -->
                    <section class="left hidden-md-and-up">
                        <div id="articleAll">
                            <div v-for="health in healthList" :key="health.healthId" >
                                <div class="imgdiv2">
                                    <img :src="'/api/upload/' + health.healthImg" alt=""> 
                                </div>
                                <div class="box3">
                                </div>
                            </div>
                            <div class="box4">
                                <div v-for="health in healthList" :key="health.healthId" class="text_2">
                                    <h1>{{health.healthTitle}}</h1>
                                    <div class="discuss">
                                        <a class='userId'>{{health.userId}}</a>
                                        <a class="userName">作者：{{health.userName}}</a>
                                        <span>{{formateDate(health.healthTime)}}</span>
                                    </div>
                                    <hr/>
                                    <div class="article">
                                        <p v-html="health.healthContent"></p>
                                    </div>
                                    <div class="warn"><p>本内容来源于食界，著作权属于作者，转载请注明出处</p></div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- md以下隐藏 -->
                    <section class="left hidden-sm-and-down">
                        <div id="articleAll">
                            <div class="box1">
                            </div>
                            <div class="box2">
                                <div v-for="health in healthList" :key="health.healthId" class="text_1">
                                    <div class="imgdiv ">
                                        <img :src="'/api/upload/' + health.healthImg" alt=""> 
                                    </div>
                                    
                                    <h1>{{health.healthTitle}}</h1>
                                    <div class="discuss">
                                        <a class='userId'>{{health.userId}}</a>
                                        <a class="userName">作者：{{health.userName}}</a>
                                        <span>{{formateDate(health.healthTime)}}</span>
                                    </div>
                                    <hr/>
                                    <div class="article" >
                                        <p v-html="health.healthContent"></p>
                                    </div>
                                    <div class="warn"><p>本内容来源于食界，著作权属于作者，转载请注明出处</p></div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div></el-col>
            </el-row>
        </div>
    </div>
  </div>
</template>
<script>
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
export default {
  name: "healthChild",
  data() {
    return {
      queryId: -1,
      healthList: [],
      activeName: "0",
      products: [
        { name: "全部文章", list: "0" },
        { name: "饮食新闻", list: "1" },
        { name: "健康常识", list: "2" },
        { name: "药膳养生", list: "3" },
        { name: "人群膳食", list: "4" }
      ]
    };
  },
  computed: {
    queryHealth() {
      let arr = [];
      for (var i = 0; i < this.healthList.length; i++) {
        if (this.healthList[i].id == this.queryId) {
          arr.push(this.healthList[i]);
        }
      }
      return arr;
    }
  },
  created() {
    this.queryId = this.$route.params.id;
    this.$axios
      .get("/api/createNote/getDataNote2", {
        params: { healthId: this.queryId }
      })
      .then(res => {
        console.log("res:", res.data.data);
        this.healthList = res.data.data;
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      let t = event.target.getAttribute("id").replace(/[^0-9]/gi, "");
      this.$router.push({ name: "healthList", params: { id: t } });
    },
    // 时间格式转换
    formateDate: function(datetime) {
      function addDateZero(num) {
        return num < 10 ? "0" + num : num;
      }
      let d = new Date(datetime);
      let formatdatetime =
        d.getFullYear() +
        "-" +
        addDateZero(d.getMonth() + 1) +
        "-" +
        addDateZero(d.getDate());
      return formatdatetime;
    }
  }
};
</script>
<style lang="css" scoped>
@import'../css/heathChild.css';

</style>
